// keep synced with RegExr._initUI:
@media (max-width: 900px) {
	body {
		//font-size: 14px;

		>.container > .header {
			> .etc > .github {
				display: none;
			}

			> .file .savekey {
				display: none;
			}
		}

		> .container > .app {
			display: block;
			position:relative;
			background: $doc-lightest;


			> .doc {
				position: absolute;
				top: 0;
				bottom: 0;
				left: $closed-sidebar-width;
				right: 0;
				
				> .blocker {
					display: none;
					width: 100%;
					height: 100%;
					position: fixed;
					background: rgba($doc-lighter, 0.5);
					z-index: 10;
				}

				&.fadeback {
					filter: blur(2px);

					> .blocker {
						display: block;
					}
				}
			}

			> .sidebar {
				position:absolute;
				top: 0;
				bottom: 0;
				left: 0;
				z-index: 10000;
				transition: width $transition-t ease-out;
				width: calc(10% + 350px);
				box-shadow: 10px 0px 12px $strong-shadow;
				background: $darkest;
				opacity: 0.94;

/*
				&:before {
					content: "";
					position: fixed;
					width: 100%;
					height: 100%;
					background: rgba($black, 0.7);
					z-index: -1;
				}
*/
				&.closed {
					width: $closed-sidebar-width;
					min-width: $closed-sidebar-width;
					box-shadow: 1px 2px 8px $strong-shadow;
					opacity: 1;
					&:before { content: none; }
				}
			}
		}
	}
}